<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>有聚有爱</title>
  <link rel="stylesheet" href="./bootstrap.min.css">
  <style>
    .dynamic-card {
      margin-top: 20px;
    }
    .dynamic-img {
      width: 100%;
      height: 200px;
      object-fit: cover;
    }
    .comment-section {
      margin-top: 10px;
    }
    .publish-area {
      margin-top: 20px;
    }
    .mynav {
	background: rgb(94, 153, 247);
	height: 60px;
	font-size: 16px;

}

    .mynav .navbar-nav li a {
	line-height: 20px;

	color: black;

	padding-right: 20px;
	padding-top: 30px;
	margin-top: -10px;
}

    .mynav .navbar-nav li a:hover{
	color: white;
}
    .mynav .navbar-nav li a.active{
	color: white;
	border-bottom: 2px solid white;
} 
    #lk_nav .nav {
	position: relative;
	background: rgb(94, 153, 247);
	
}

    #lk_nav .nav li {
	margin-right: 50px;
}

    @media all and (min-width: 908px) {
	#lk_nav .nav {
		left: 20%;
	}
}

  </style>
</head>
<body  background="https://i0.hdslb.com/bfs/new_dyn/5474cad03da2ae1a0f230ebbac22b617290750052.jpg@1256w_708h_!web-article-pic.avif"  
style="background-repeat: no-repeat; background-attachment: fixed; background-size: 100%;">
<div>  
  <nav class="mynav navbar navbar-default navbar-static-top">  
      <div class="container-fluid">  

          <div class="navbar-header">  
              <a class="navbar-brand" href="登录.html">  
                  有聚有爱  
              </a>  
          </div>  

          <div class="collapse navbar-collapse" id="lk_nav">  
              <ul class="nav navbar-nav">  
                  <li>  
                      <a href="首页.html">首页</a>  
                  </li>  

                  <li>  
                      <a href=""class="active">动态</a>  
                      <!--音频，图片，效果-->  
                  </li>  
                  <li>  
                      <a href="好友.html">好友</a>  
                      <!--包括音乐+视频-->  
                  </li>  
                  <li>  
                      <a href="个人中心.html" >个人中心</a>  
                      <!--音频，图片，效果-->  
                  </li>  
                  <li>  
                      <a href="关于我们.html">关于我们</a>  
                      <!--音频，图片，效果-->  
                  </li>  

              </ul>  
          </div>  
          <!-- /.navbar-collapse -->  
      </div>  
      <!-- /.container-fluid -->  
  </nav>  
</div> 

<div class="container">
  <!-- 发布动态模块 -->
  <div class="publish-area card">
    <div class="card-body">
      <h5 class="card-title">发布动态</h5>
      <div class="mb-3">
        <textarea id="dynamic-content" class="form-control" rows="3" placeholder="写下你想发布的动态..."></textarea>
      </div>
      <button id="publish-btn" class="btn btn-primary">发布</button>
    </div>
  </div>

  <!-- 动态展示区域 -->
  <div id="dynamic-list">
    <!-- 动态卡片 -->
    <div class="dynamic-card card">
      <img src="https://i0.hdslb.com/bfs/new_dyn/642e8d4d2ad68756f304f981b4b60e9a412169635.png@.webp" class="dynamic-img card-img-top" alt="动态图片">
      <div class="card-body">
        <h5 class="card-title">用户名</h5>
        <p class="card-text">这是发布的一条动态内容。</p>
        <!-- 点赞和评论功能 -->
        <div class="d-flex justify-content-between">
          <div>
            <button class="btn btn-outline-success like-btn">点赞 <span class="like-count">0</span></button>
          </div>
          <button class="btn btn-outline-danger delete-btn">删除</button>
        </div>
        <!-- 评论区 -->
        <div class="comment-section">
          <h6>评论</h6>
          <ul class="list-group mb-3 comment-list">
            <!-- 评论条目 -->
            <li class="list-group-item">小明：这是一条评论！</li>
          </ul>
          <div class="input-group mb-3">
            <input type="text" class="form-control comment-input" placeholder="添加评论...">
            <button class="btn btn-outline-primary add-comment-btn" type="button">评论</button>
          </div>
        </div>
      </div>
    </div>
    <!-- 动态卡片模板结束 -->
  </div>
</div>

<!-- JavaScript -->
<script>
  // 发布动态功能
  document.getElementById("publish-btn").addEventListener("click", function() {
    const content = document.getElementById("dynamic-content").value;
    if (content.trim()) {
      const dynamicList = document.getElementById("dynamic-list");

      // 创建新的动态卡片
      const dynamicCard = document.createElement("div");
      dynamicCard.classList.add("dynamic-card", "card");

      dynamicCard.innerHTML = `
        <img src="https://i0.hdslb.com/bfs/new_dyn/642e8d4d2ad68756f304f981b4b60e9a412169635.png@.webp" class="dynamic-img card-img-top" alt="动态图片">
        <div class="card-body">
          <h5 class="card-title">用户名</h5>
          <p class="card-text">${content}</p>
          <div class="d-flex justify-content-between">
            <div>
              <button class="btn btn-outline-success like-btn">点赞 <span class="like-count">0</span></button>
            </div>
            <button class="btn btn-outline-danger delete-btn">删除</button>
          </div>
          <div class="comment-section">
            <h6>评论</h6>
            <ul class="list-group mb-3 comment-list"></ul>
            <div class="input-group mb-3">
              <input type="text" class="form-control comment-input" placeholder="添加评论...">
              <button class="btn btn-outline-primary add-comment-btn" type="button">评论</button>
            </div>
          </div>
        </div>
      `;

      // 将新的动态卡片添加到页面中
      dynamicList.prepend(dynamicCard);
      document.getElementById("dynamic-content").value = ''; // 清空输入框

      // 初始化点赞、删除和评论功能
      initDynamicCard(dynamicCard);
    } else {
      alert("请输入动态内容！");
    }
  });

  // 初始化动态卡片的事件监听
  function initDynamicCard(card) {
    let liked = false; // 初始未点赞

    // 点赞功能
    const likeButton = card.querySelector(".like-btn");
    likeButton.addEventListener("click", function() {
      const likeCountSpan = card.querySelector(".like-count");
      let count = parseInt(likeCountSpan.textContent, 10);

      if (liked) {
        // 如果已经点赞，取消点赞
        likeCountSpan.textContent = --count;
        likeButton.classList.remove("btn-success");
        likeButton.classList.add("btn-outline-success");
        likeButton.textContent = '点赞 ';
        likeButton.innerHTML += `<span class="like-count">${count}</span>`;
        liked = false;
      } else {
        // 如果未点赞，执行点赞
        likeCountSpan.textContent = ++count;
        likeButton.classList.remove("btn-outline-success");
        likeButton.classList.add("btn-success");
        likeButton.textContent = '已点赞 ';
        likeButton.innerHTML += `<span class="like-count">${count}</span>`;
        liked = true;
      }
    });

    // 删除功能
    card.querySelector(".delete-btn").addEventListener("click", function() {
      card.remove();
    });

    // 评论功能
    card.querySelector(".add-comment-btn").addEventListener("click", function() {
      const commentInput = card.querySelector(".comment-input");
      const commentText = commentInput.value.trim();
      if (commentText) {
        const commentList = card.querySelector(".comment-list");
        const commentItem = document.createElement("li");
        commentItem.classList.add("list-group-item");
        commentItem.textContent = "你：" + commentText;
        commentList.appendChild(commentItem);
        commentInput.value = ''; // 清空评论输入框
      } else {
        alert("请输入评论内容！");
      }
    });
  }

  // 初始化页面已有的动态卡片
  document.querySelectorAll(".dynamic-card").forEach(initDynamicCard);
</script>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
